<% layout('/layouts/default.html', {title: '', bodyClass: ''}){ %>
<!-- <link rel="stylesheet" href="${ctxStatic}/modules/sys/sysDesktop.css?${_version}"> -->
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script src="${ctxStatic}/echarts/infographic.js"></script>
<script src="${ctxStatic}/echarts/macarons.js"></script>
<script src="${ctxStatic}/echarts/shine.js"></script>
<script src="${ctxStatic}/echarts/vintage.js"></script>
<script src="${ctxStatic}/echarts/roma.js"></script>
<div class="content pb0">
	<!-- Info boxes -->
	
	<!-- Chart boxes -->
	<div class="row">
		<div class="col-md-12">
			<div class="box box-widget">
				<div class="box-header with-border">
					<h3 class="box-title">编辑人数统计</h3>
					<div class="box-tools pull-right">
						<button type="button" class="btn btn-box-tool" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
						
						<button type="button" class="btn btn-box-tool" data-widget="remove">
							<i class="fa fa-times"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
					
					<div class="row">
						<div class="col-md-12">
							<div class="chart">
								<div id="myChart" style="height:1200px;width:100%"></div>
								
								
							</div>
						</div>
						
					</div>
				</div>
				
			</div>
		</div>
	</div>
</div>

<% } %>

<script type="text/javascript">
	
	    
    var myChart = echarts.init(document.getElementById('myChart'));
    
    
    var xMax=928;

    option = {
    	tooltip:{
    		show:true,
    		formatter:"{b},总人数:{c},编辑人数:{c1}",
    		trigger: 'axis'
    	},
    	 grid: {
    	        left: '3%',
    	        right: '4%',
    	        bottom: '3%',
    	        containLabel: true
    	    },
        xAxis : [
            {
                max:xMax,
                type : 'value',
                axisTick: {show: false},
    	        axisLine: {show:false},
    	        axisLabel: {show:false},
    	        splitLine: {show: false}
            }
        ],
        yAxis : [
            {
                type : 'category',
                data : ['其他','其他1','其他2'],
                nameTextStyle:{color:'#b7ce9e',fontSize:'18px'},
               	axisLabel: {show:true},
                axisTick: {show: false},
    	        axisLine: {show: false}
            }
        ],
        series : [
            { 
                name:' ',
                type: 'bar',
                barWidth:10,
                silent:true,
                itemStyle: {normal: {color: '#1cc'}},
                barGap:'-100%',
                barCategoryGap:'10%',
                data: [100,100,100]
            },
            {
                name:' ',
                type:'bar',
                barWidth:10,
                label: {normal: {show: false,position: 'right',formatter: '{c}%'}},
                data:[{value:17,itemStyle:{normal:{color:'#f80'}}},{value:17,itemStyle:{normal:{color:'#081'}}},{value:17,itemStyle:{normal:{color:'#081'}}}]
            }
            
        ]
    };
    
    myChart.setOption(option);

    myChart.showLoading();
    var names=[];
    var total=[];
    var value=[];
    $.ajax({
        type : "post",
        async : true,
        url : "${ctx}/sys/count/count", 
        data : {},
        dataType : "json",
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result) {
            	
                for(var i=0;i<result.length;i++){
                    names.push((i+1) +": "+result[i].a);    //挨个取出类别并填入类别数组
                }
                for(var j=0;j<result.length;j++){
                	total.push(result[j].b);    //挨个取出销量并填入销量数组
                }
                for(var k=0;k<result.length;k++){
                	value.push({value:result[k].d,itemStyle:{normal:{color:'#f80'}}});    //挨个取出销量并填入销量数组
                }
                console.log(value);
                myChart.hideLoading();    //隐藏加载动画
               
                myChart.setOption(
                		
                		{
                			yAxis : [
                	            {
                	                type : 'category',
                	                data : names,
                	                nameTextStyle:{color:'#b7ce9e',fontSize:'18px'},
                	                axisLabel:{  
                	                    interval:0,//横轴信息全部显示  
                	                    rotate:0,//-15度角倾斜显示  
                	                    },
                	                axisTick: {show: false},
                	    	        axisLine: {show: false}
                	            }
                	        ],
                	        
                	        series : [
                	            { 
                	                name:' ',
                	                type: 'bar',
                	                barWidth:10,
                	                silent:true,
                	                itemStyle: {normal: {color: '#ccc'}},
                	                barGap:'-100%',
                	                barCategoryGap:'10%',
                	                data: total
                	            },
                	            {
                	                name:' ',
                	                type:'bar',
                	                barWidth:10,
                	                label: {normal: {show: true,position: 'right',formatter: '{c}%'}},
                	                data:value
                	            }
                	            
                	        ]
                		}
                		);

            }

        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })

</script>
<script>
$(window).resize(function(){
	var footerHeight  = $('.main-footer').outerHeight() || 0;
	var windowHeight  = $(window).height();
	$('.content').css('min-height', windowHeight - footerHeight)
}).resize();
</script>